<template>
  <el-select v-model="_value" :disabled="disabled" clearable filterable placeholder="请选择抵扣金规则" :style="'width: 100%; max-width: ' + maxWidth" @change="change">
    <el-option v-for="(item, index) in list" :key="index" :value="item[field]" :label="item.name" />
  </el-select>
</template>

<script>
import { ruleOptions } from '@/api/market'
export default {
  name: 'DeductRuleSelect',
  props: {
    field: {
      type: String,
      default: 'id'
    },
    maxWidth: {
      type: String,
      default: '400px'
    },
    value: {
      type: [String, Number, Object, Array],
      default: undefined
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      list: []
    }
  },
  computed: {
    _value: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    change(value) {
      const vm = this
      vm.$emit('change', vm._value)
    },
    refresh(type) {
      const vm = this
      vm._value = null
      vm.list = []
      vm.$emit('change', vm._value)
      vm.getList(type)
    },
    getList(type) {
      const vm = this
      const data = {
        type: type
      }
      if (data.type === 'all') {
        delete data.type
      } else {
        data.type = parseInt(data.type)
      }

      ruleOptions(data).then(res => {
        vm.list = res.data.data.data
      }).catch(res => {
        if (res && res.data && res.data.errno !== 0) {
          this.$message.error(`${res.data.errmsg}（${res.data.errno}）`)
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
